<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>同jquery类似事件</title>
	<style type="text/css">
		.btn2{
			width: 100px;
			height: 100px;
			background: #f0f;
		}

	</style>
</head>
<body>
	<!--
		on()  绑定事件处理程序
		off() 方法移除用目标元素on绑定的事件处理程序。
		bind()  为每个匹配元素的特定事件绑定事件处理函数，可同时绑定多个事件，也可以自定义事件。
		one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
		trigger() 触发有bind定义的事件（通常是自定义事件）
		unbind()  bind的反向操作，删除匹配元素所绑定的bind事件。
	-->
		
<button class="btn1">按钮1</button>
<div class="btn2">按钮2</div>
<button class="btn3">按钮3</button>

<script src="../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
    //绑定
    // $('.btn1').on('touchstart',function () {
    //   alert('on进行绑定')
    // })
    //不传递参数（事件），就是解绑全部事件
    // $('.btn1').off()

    //bind即使对同一个事件，我可以绑定多个回调函数
    $('.btn1').bind('touchstart',function () {
      alert('bind绑定')
    })
    $('.btn1').bind('touchstart',function () {
      alert('bind绑定')
    })

    $('.btn1').bind('myTouch',function () {
      alert('myTouch')
    })

    $('.btn1').unbind()

    //触发自定义事件
    $('.btn1').trigger('myTouch')

    $('.btn3').one('touchstart',function () {
      alert('我只执行一次')
    })

  })

</script>
</body>
</html>